<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>

<body>
<main>
    <section id="login">
        <h2>用户登录</h2>
        <form id="loginForm">
            <label for="number">账号:</label>
            <input type="text" id="number" placeholder="请输入您的账号">
            <label for="password">密码:</label>
            <input type="password" id="password" placeholder="请输入您的密码">
            <div class="remember">
                <label for="remember-me">已阅读并同意协议</label>
                <input type="checkbox" id="remember-me">
            </div>
            <!-- 注意：type="button" 防止表单自动提交 -->
            <button type="button" id="submit">登录</button>
            <p>忘记密码? <a href="#" id="forgot-password">修改密码</a></p>
            <p>没有账号? <a href="#" id="register"></a><a href="http://localhost:63342/SSM/project07/src/main/webapp/WEB-INF/static/list.html">注册</a></p>
        </form>
    </section>
</main>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>
    // 1.找元素,获取登录按钮
    const loginForm = document.getElementById('submit');

    //2.绑定点击事件
    loginForm.onclick = function () {

        //3.获取密码和用户名数据
        const number = encodeURIComponent(document.getElementById('number').value);
        const password = encodeURIComponent(document.getElementById('password').value);
        //发送axios请求到后端
        axios.post('http://localhost:8080/user/login', {
            number: number,
            password: password
        }).then(res => {
            const responseBody = res.data;
            if (responseBody.code === 200){
                alert('登录成功')
                // 登录成功后跳转到用户主页或其他页面
                window.location.href = 'home.html'; // 假设跳转到主页

            }else {
                alert('登录失败：' + responseBody.message);
            }
        }).catch(error => {
            console.error('请求失败：', error);
            alert('登录请求失败，请检查网络或服务器状态');
        });
    }
</script>
</body>